<template>
  <div>
    <template v-if="height">
      <el-table
        v-bind="$attrs"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        :height="height"
        :span-method="spanMethod"
        @selection-change="handleSelectionChange"
      >
        <!-- 判断是否需要多选 -->
        <el-table-column
          v-if="hasCheck"
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <!-- 遍历列 -->
        <template v-for="(vo, i) in theadData">
          <el-table-column
            :key="`${i}_col`"
            :fixed="vo['fixed'] ? vo['fixed'] : false"
            :width="vo['width'] !== undefined ? vo['width'] : 'auto'"
            :align="vo['align'] || 'center'"
          >
            <span
              slot="header"
              :title="vo['name']"
              :class="{
              'one_line': isOneLine
            }"
            >
              {{vo['name']}}
            </span>
            <template slot-scope="scope">
              <template v-if="vo.slotName && $scopedSlots[vo.slotName]">
                <slot
                  :name="vo.slotName"
                  :scope="scope"
                ></slot>
              </template>
              <template v-else>
                <span
                  :title="scope.row[vo['code']]"
                  :class="{
                    'one_line': isOneLine,
                  }"
                >
                  {{ vo['code'] | plholder(scope.row, vo) }}
                </span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </template>
    <template v-else>
      <el-table
        v-bind="$attrs"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        :span-method="spanMethod"
        @selection-change="handleSelectionChange"
      >
        <!-- 判断是否需要多选 -->
        <el-table-column
          v-if="hasCheck"
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <!-- 遍历列 -->
        <template v-for="(vo, i) in theadData">
          <el-table-column
            :key="`${i}_col`"
            :fixed="vo['fixed'] ? vo['fixed'] : false"
            :width="vo['width'] !== undefined ? vo['width'] : 'auto'"
            :align="vo['align'] || 'center'"
          >
            <span
              slot="header"
              :title="vo['name']"
              :class="{
              'one_line': isOneLine
            }"
            >
              {{vo['name']}}
            </span>
            <template slot-scope="scope">
              <template v-if="vo.slotName && $scopedSlots[vo.slotName]">
                <slot
                  :name="vo.slotName"
                  :scope="scope"
                ></slot>
              </template>
              <template v-else>
                <span
                  :title="scope.row[vo['code']]"
                  :class="{
                    'one_line': isOneLine,
                  }"
                >
                  {{ vo['code'] | plholder(scope.row, vo) }}
                </span>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    hasCheck: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    theadData: {
      // 数据格式  [ { name: '序号', code: 'index', [fixed: false, width: '100px' ] } ]
      type: Array,
      default() {
        return [];
      }
    },
    height: {
      type: String,
      default: ""
    },
    isOneLine: {
      // 是否单行文本省略号
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      multipleSelection: [] // 选中的数据
    };
  },
  watch: {
    value(val) {
      this.multipleSelection = val;
    }
  },
  filters: {
    plholder(val, obj, data) {
      if (data["plholder"] !== undefined) {
        // 存在占位符
        return [null, undefined].indexOf(obj[val]) > -1
          ? data["plholder"]
          : obj[val];
      }
      return obj[val];
    }
  },
  mounted() {
    this.multipleSelection = this.value;
  },
  methods: {
    /**
     * @name handleSelectionChange
     * @description 切换选中状态
     * @author cjs1992
     * @date 2019-10-16 08:48:50
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("input", val);
    },
    /**
     * @name spanMethod
     * @description 合并行列
     * @author cjs1992
     * @date 2020-04-07 15:59:46
     */
    spanMethod(data) {
      if (!this.$attrs.spanMethod) {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
      return this.$attrs.spanMethod(data);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
